import Taro, { Component } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { getCustomerInfo, addCustomer } from "../../actions/customer";
import Chart from "../../components/chart";
import List from "../../components/customer/list";
import Head from "../../components/customer/head";
import LoginModal from "../../components/modal/loginModal";
import AddCustomerModal from "../../components/modal/addCustomerModal";
import { getCache } from "../../utils/cache";
import { CACHE_KEY } from "../../service/config";
import { connect } from "@tarojs/redux";
import { AtMessage } from "taro-ui";
import "./index.less";

@connect(
  ({ account, customer }) => ({
    ...customer,
    ...account
  }),
  dispatch => ({
    async getCustomerInfo() {
      dispatch(await getCustomerInfo());
    }
  })
)
class Customer extends Component {
  config = {
    navigationBarTitleText: "我的客户"
  };

  state = {
    isOpened: false,
    opened: false,
    customerName: "",
    customerPhone: ""
  };

  componentWillMount() {
    if (!getCache(CACHE_KEY).token) {
      this.setState({
        isOpened: true
      });
    } else {
      this.props.getCustomerInfo();
    }
  }

  openAddCustomerModal() {
    this.setState({
      opened: true
    });
  }

  addCustomer(params) {
    const { tel } = params;
    if (tel === "" || !/^1[3456789]\d{9}$/.test(tel)) {
      Taro.showToast({
        title: "请输入有效手机号",
        icon: "none"
      });
      return false;
    }

    addCustomer(params).then(result => {
      const that = this;
      if (result) {
        Taro.atMessage({
          message: "新增客户成功",
          type: "success",
          duration: 1000
        });
        that.setState(
          {
            opened: false
          },
          () => {
            that.props.getCustomerInfo();
          }
        );
      }
    });
  }

  /**
   * cnt - 已提交客户
   * cnt1 - 已预约客户
   * cnt3 - 已到司客户
   * cnt4 - 已成交客户
   * cnt0 - 已流失客户
   * daycnt - 当天预约
   * tcnt - 明天预约
   */
  render() {
    const { cnt, cnt1, cnt3, cnt4, cnt0, daycnt, tcnt, report } = this.props;
    Taro.navi;
    const customer_list_counts = [
      {
        title: "已提交客户",
        count: cnt,
        class: "already-sub-color",
        state: 0
      },
      {
        title: "已预约客户",
        count: cnt1,
        class: "make-sub-color",
        state: 1
      },
      {
        title: "已到司客户",
        count: cnt3,
        class: "come-sub-color",
        state: 3
      },
      {
        title: "已成交客户",
        count: cnt4,
        class: "done-sub-color",
        state: 4
      },
      {
        title: "已流失客户",
        count: cnt0,
        class: "lose-sub-color",
        state: 5
      }
    ];
    return (
      <View className="customer-index">
        <AtMessage />
        <View className="customer-head">
          <Text className="customer-title">我的客户</Text>
          <View className="add-customer-con">
            <Image
              className="add-customer"
              onClick={this.openAddCustomerModal.bind(this)}
              src={require("../../assets/img/add.png")}
            />
          </View>
        </View>

        <Head daycnt={daycnt} tcnt={tcnt} />
        <List customer_list_counts={customer_list_counts} />
        <Chart dataArr={report} />
        <LoginModal
          parent={this}
          isOpened={this.state.isOpened}
          info="未登录无法查看我的客户"
        />
        <AddCustomerModal
          addCustomer={this.addCustomer.bind(this)}
          opened={this.state.opened}
        />
      </View>
    );
  }
}
export default Customer;
